<template>
  <div class="container-a">
    <div class="detail-wrap" v-if="d !== ''">
      <div class="di">
        <div class="dii s">
          发件人: &nbsp;<span class="fblue">{{d.p}}</span>
        </div>
        <div class="dii">
          收件人: &nbsp;<span class="fblue">{{d.rp}}</span>
        </div>
      </div>
      <div class="di">
        <div class="dii2">
          {{d.h}}
        </div>
        <div class="dii2">
          <span class="t"> {{d.t | dateFormat2}}</span>
        </div>
      </div>
      <div class="di">
        <div class="dii s">
          {{d.f}}: &nbsp;<span>{{d.t | dateFormat}}</span>
        </div>
        <div class="dii" v-html="d.c">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from "vuex"

  export default {
    data () {
      return {
        d: ''
      }
    },
    methods: {
      getD(){
        let id = this.$route.params.id;
        this.receivedList.forEach((i) => {
          if (i.id === id) {
            this.d = i;
          }
        })
      }
    },
    computed: {
      ...mapState([
        'receivedList'
      ]),
    },
    components: {},
    mounted(){
      this.getD();
    }
  }
</script>

<style scoped lang="scss">
  @import "../css/mixin";
  @import "../css/common";

  .container-a {
    z-index: 999;
    background-color: #f6f4f9;
  }

  .detail-wrap {
    height: 100%;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #d8d8d8;
    margin-top: 12px;
    overflow-x: hidden;
    overflow-y: scroll;
    .di {
      padding: 8px 10px;
      position: relative;
      @include bord_bottom(12px);
      &:last-child:before {
        display: none;
      }
      .dii {
        padding: 4px 0;
        font-size: 14px;
      }
      .dii2{
        font-size: 14px;
      }
      .s {
        font-size: 16px;
      }
      .t {
        font-size: 12px;
        color: $gray2;
      }
      .fblue {
        color: $blue_theme;
      }
    }
  }
</style>
